@我愛靜電?在《移動客戶端設計開發經驗(1)流程篇》中，我們把流程搞通了。?那么，在這一篇文里，要給大家奉獻各種干貨。相信作為設計師的我們，肯定會非常非常感興趣滴。想了很久，弄什么地方入手呢? ok!?我們打開電腦，開始工作，那么除了qq還有郵箱，那么我們最愛的軟件，肯定是下邊這些啦：

好，不管你的最愛是fireworks?還是photoshop還是illustrator或者是其它。都沒關系。打開你最喜歡的一個，開始我們客戶端的設計吧。

?一、開始我們的第一步

因為現在移動客戶端大行其道，相信會有很多從web轉過來的從事客戶端設計的同學，也許大家會覺得，我web頁面設計妥妥的，客戶端設計肯定沒有任何問題，你看你看，手機上的界面比那些復雜的web頁可簡單多了，不就是幾個條條框框幾個按鈕嗎??小case!?這個時候，你身邊的ui設計師估計在心中默默的吐槽了，“哼哼哼，那你就來試試吧！”?好吧，不管霸王洗發水可以讓成龍的頭發有多飄逸，我們一定要試試，確定那個不是特效堆出來的。

打開熟悉的ps或fw，新建畫布。額，寬多少，高多少，分辨率多少啊？好，先從你身邊的手機開始吧。這里以iphone為例，iphone5的分辨率是640-1136，iphone4的話，640-960。??自己的手機分辨率多少，就建個多少的畫布吧，分辨率保持軟件默認就好。

一張畫布建好了。好，我們現在可以開始設計了。在這里，還要跟大家嘮叨一點。看看你手機的最上端，黑色的狀態欄（就是手機上顯示時間信號的東西了嗎？），為了我們能在手機上預覽時剛好占滿整個屏幕，所以這個條條在大部分情況下，需要包含到設計稿中。iphone下，這個條（Status Bar）的高度為40px。我們先畫一個高40的條放上去，然后呢，一堆的細節，按照下圖的高度先畫到畫布里吧（注意，下圖是3GS的分辨率哦，所以高度及寬度全部要乘以2），這個對于大家實在是太簡單了，注意分辨率就可以了。這個時候你可以用之前介紹的神器?PS play在手機上預覽一下。?框架搞好，剩下的就可以開始設計了。

 

二、Web設計與客戶端設計的異同點

第一步絮叨了好多，但其實對大家來說這些其實是真心太簡單了對吧。對于如何設計，如何配色，相信各位專業的同學都不會有問題的，所以我們也不打算在這里教大家如何來做這些了。?那么，下邊主要探討下web設計和客戶端設計的異同點。

1、字體選用

字體是基礎。在網頁上，我們使用最多的可能是宋體，或者微軟雅黑。那么，為了讓客戶端設計稿有較高的還原度，這里雅黑或者神馬宋體就會弱爆了，這些字體并不適合手機屏幕來顯示。?這里直接為大家推薦字體。
IOS：?請直接選用冬青黑體或者華文黑體即可，推薦使用冬青黑體，效果更好。

Android：Droid Sans Fallback（其實冬青黑或者華文黑也可以考慮啦）
手機上字體的顯示一般都會做字體的抗鋸齒處理，那我們在設計稿里也來做相應的設置吧（這里我們不考慮極低分辨率使用像素字體顯示的情況）
至于字體使用多大號的，我們這里沒有太嚴格規定，但有一點必須要做，設計完后，一定要導入手機上看真實效果具體感受一下，因為在電腦屏幕上和手機上看，感受是完全不一樣的，畢竟我們是來設計手機的應用。

2、細節為王

細節？對，在web端，由于我們的瀏覽介質是顯示器，加上顯示器分辨率及之前的設計習慣，所以有時候我們可以不用太注重一個像素的移位等等的問題，但對于手機，可就完全不一樣了，不知道各位同學有木有類似的感受，拿著設計web頁的趕腳做了一頁移動端設計稿，導入手機上之后發現這完全是慘不忍睹啊，欲哭無淚有木有。

所以，如果你是大大咧咧風格粗獷的設計師，那現在就要加倍細心了，你的粗心和粗狂的風格會在手機上成倍的放大放大再放大，比如發光比如投影比如字體一像素投影等等效果，這可不是時尚大氣國際化哦，這是丑。當然，這個感覺是需要一定時間才能找到的，唯一的捷徑就是多在手機上預覽效果圖，多研究其它應用的細節。有時間可以嘗試畫畫圖標，這是個細致活。

3、簡單易用是主旨

由于手機屏幕的限制，雖然現在分辨率高和精度特別高的手機不少，但我自己的經驗，如果手機一個屏幕羅列太多的功能及操作以及元素，那這個設計及其可能是一個失敗的設計。某人說過，少即是多。其實，要做減法真的不容易。這個是我們設計思路的一個轉變的過程。

舉例:
比如，tab bar上的文字。?能寫兩個就不要寫四個。?我的賬戶，我們可以簡化成"賬戶"。
再比如。按鈕，我們能放兩個按鈕，絕不放三個或者四個(選擇恐懼癥這個你懂的)，以下是反例。猶豫5秒，你還不知道要點哪個么?

再再比如:相對于web頁，我們不可能把所有內容都塞到手機的一屏，所以，主旨是一個屏幕中，我們需要讓使用者完成一項或者一類功能即可。更多的功能可以通過跳頁，彈層以及其他交互形式完成。
這里再嘮叨一個小細節，ios開發中規定，按鈕(可點按區域)的高度最好不要小于44px。所以，最好不要做太小的按鈕，這樣使用者會抓狂的。

4、分辨率適配

誒，想到這個就頭疼啊頭疼。上邊我們做了個效果圖，沒錯按iphone分辨率來的。網頁要適配分辨率。手機還要適配，而且。非常麻煩啊有木有啊。我們來看下圖:主流手機分辨率統計(我們假設屏幕dpi是一樣的情況下。

為了方便觀察我們列表如下:
第一列為分辨率，第二列為寬高比，第三列為寬除以高的數字，第四列是備注啦(根據我們現有的測試機來統計的情況)

為什么要統計個呢。我們可以回到本文開頭，這個情況下，我們是否在糾結，設計稿用哪種尺寸做呢?難道有這么多分辨率我們就要做這么多設計稿嗎?這是要逆天啊!!!恩，一想到這個問題就無比混亂。

好吧我們先把最好弄的iphone說完。?iphone有三種分辨率320-480，640-960，640-1136。分別對應3GS，ip4，ip5。?再往細了看，ip最終只有兩種，一種3gs一種ip4和ip5。?分析完感慨一下。apple多為廣大開發者設計者考慮啊。?ip4適配ip5簡直太簡單了，因為寬度是不變的啊。

所以，在做ios開發時，我們可以選一種較大分辨率來做設計稿640-960或640-1136就好(取決于你的測試機)，這樣從大分辨率縮小到小分辨率就很easy了。?直接縮小百分之50就好了，妥妥的。

至于剩下的(我們這里只考慮安卓，wp等先忽略)，那就是廣大的安卓兄弟了，你會發現安卓的分辨率是多么的獨特多么的百花齊放啊(有沒有想哭的趕腳啊?)?有同學問了，我現在只要做安卓的應用，用哪個尺寸做設計稿捏??額。?我這里推薦480-800吧。?如果安卓和ip一起開發的，我建議使用ip的分辨率來做，這樣直接從640寬等比縮就可以了。

綜上，優先設計ip分辨率尺寸640-960或640-1136。宗旨是從大往小縮。(原因?設計師都懂，有一次同事問我，能不能把一張50-50的小的照片放大到5000-5000，我回復，去屎。。。。)

這里有同學會問了，安卓的適配還是沒解決啊沒解決??我們再看一下上表，分析下數字。?第三列，看比值。?從0。56-0。75?都有。?但。相同的比值呢? 0。56這個最多。?還有0。6?及0。66，?以及0。75?。?(魅族這種奇葩屏幕不多解釋，需要單獨適配。刨除smartbar后比值為0。63，小胖子一個)。這里就要引出屏幕精度的問題了。?安卓的適配，最終可以歸納為適配四種精度，說白了，如果要達到完美的效果，需要做四套圖。

有安卓開發經驗的同學可能知道。這四種適配。看下圖。

*本表來自?《photoshop智能手機app界面設計》

根據實際開發經驗，有時候為了省事，我們可以只來做第三欄，就是highdensity這個尺寸的適配，但最終效果并不能保證所有手機都會滿意。這個需要你和程序員同學達成默契。告訴他我是按照high density做的圖哈。這個時候他們就不會把你切的圖扔到其他文件夾，導致實際效果圖片不是超大就是超小。

回想起我剛做安卓設計的時候，偷懶，按照640-960分辨率來作圖，切圖，直接給安卓開發工程師，這個時候工程師默認把圖片適配了high density。?結果就是，在手機里看所有的東西都大一號。?同樣的情況，如果用低分的圖適應高分的，整個程序就會一片模糊。

所以根據實際經驗來看，使用480-800這樣的分辨率來切圖和適配是比較合適的。?一方面，低分辨率的屏幕現在越來越少了，另一方面，其實效果并不會太過分。?可是，另一方面，extra high這樣的分辨率是當前這階段不能不再考慮的了。因為高分屏幕越來越多，1920-1080分辨率的手機也已經有了，為了保證效果，我們需要適配某些主流的分辨率和機型。?比如魅族mx2，?note2?。?也就是說我們要提供部分特別影響視覺效果的圖來適配。舉例:閃屏圖片(不適配可能變模糊或者拉伸)，特別影響布局的圖片(不做適配布局會亂套)

總之，在開發成本和效率上，我們要做出一些兼顧。?因為所有圖片要切四套，適配成本及工作量就太大了，值不值得，各位自行考量，這里只提供本人開發過程中的一些考慮因素。

總結:在安卓iphone同時開發的情況下(又是同一個團隊設計師又比較苦逼)，我們可以優先做出iphone的界面，因為640-960已經可以滿足安卓最高適配的要求啦。?(安卓后期與iphone不同的交互及表現形式可以單獨處理，想省事，直接套iPhone，請專業人士不要踢我。)

 

三、切圖

因為這篇文的主旨是告訴大家操作方法和思路，對于ui如何呈現，請大家多看看網上的優秀案例，這個設計的細節實在太多。所以這里省略過去。各大素材網站有很多的ui素材可以參考。

設計過程中我們可以用流程篇中提到的神器來提高設計效率。這里不多講。

設計稿完成并確認后，我們需要切圖，ohno!這又是一個及其瑣碎的工作。

1、如果你不知道某部分怎么切，請務必在切圖前與工程師溝通。與他們進行詳細的商討，一般情況下他們很愿意為你答疑解惑。(嗯嗯，嫁了吧!)

2、開切

相信大部分細節我們已經和工程師溝通過了。?這里我們主要提幾個要點。

(1)iOS切圖相對容易，并且交互效果實現較簡單，這也是我最愿意做ios切圖和開發的原因。??在切圖過程中需要切兩套圖來適配。建議先切一套大圖，適配ip4ip5或者高分屏ipad。?文件名自便，后邊加@2x字樣，圖片格式png。(當然某些圖jpg也可以，但png優勢明顯，所以都png吧)。

切完適配高分ip的圖后。就是一堆@2x這樣的png圖片啦。然后呢，教大家一個非常方便的做法來做縮小2倍的圖片。

這里推薦firework這個神器。我們使用批處理工具。?選擇file>batch Process。

選擇所有@2x的圖片。?add到下面的框中。?next。

選擇scale?加入到右邊的框，然后選擇，scaleto Percentage?選50%，也就是縮小到原圖的一半。

然后將export同樣加入右側，選擇導出格式?png。?然后我們選?custom location?選一個其它文件夾。?主要不要選第一個啊，覆蓋了2倍的文件就找不回來了，所以一定要選一個其它的地方哦。

然后選擇batch。?等進度到100%。一大波@2x的圖片就轉化成縮小2倍的圖了。分分鐘搞定!

最后修飾一下，將一倍圖文件名中的@2x用批量重命名工具去掉就好。?同樣分分鐘搞定!?這效率高吧!?

注意:在切圖時。切片大小必須為偶數?比如像素為100-80的切片。??不能使用101-81這樣的圖。否則轉換成一倍的時候，fireworks會很犯難的，而且在手機端會變虛或者錯位，后果嚴重。

那么ios切圖就這么完成了。

(2)安卓切圖。

安卓可以通過上表設置不同縮小比例來進行批出來完成。?這個參考ios切圖步驟。
另外一個比較特殊的是安卓的.9圖(點9圖)。?這是一種特殊的文件格式。?因為安卓分辨率很多。所以安卓需要一種特殊的圖片處理形式。
首先?我們效果圖的按鈕是這個樣子的。

這個時候，祭出我們的神器-點9圖編輯器。其實就是兩個文件，mac及win平臺通用哦。?前提是安卓java運行環境。(請網上自行尋找)

打開后是這樣，我們可以拖放一個文件進去。

打開后我們發現這個按鈕多出來一圈透明區域。?那我們先在上邊點一個點。?這個時候看右邊，發現按鈕橫向拉伸了，這個時候在左邊空白點一個點，發現圖縱向拉伸了。這就是安卓的圖片處理機制啦。很簡單的說。

總結:劃線區域即拉伸區域。?左:縱向拉伸; ?右:橫向拉伸; ?右和下:用處不太大，分別標識縱向和橫向的文字區域。

那我們保存這個按鈕。生成了一個以.9結尾的png圖像。最終結果如下。

這樣，我們就完成了一個點9圖的制作。關于點9圖，還有很多小細節。有興趣的同學可以搜一下網上的教程。
點9圖的作用在于橫向和縱向拉伸，減小圖片尺寸。就像網頁中的背景圖片的平鋪，有點類似。?大家可以感受下。

(3)APP圖標

這里簡單說一下圖標，更多細節可以參考各自平臺的設計手冊。
IOS:114-114px及512-512尺寸(后者App Store提交審核用)
Android:按72-72px做好了。?注意低密度機器圖標的適配。不同平臺有區別。注意。

四、安卓與ios設計的異同及處理

前幾天空閑時間拿著安卓手機與ios，下載了同款應用程序若干。?分別對比了一下，感慨頗多。

1、前邊說過，ios及安卓同時開發，且工期有限人手有限的情況下。我們可以優先做ios效果圖。然后根據安卓及ios的不同分別做出適配。?當然，如果你愿意，其實大部分ios應用和效果圖可以直接搬到安卓上。?但，這是最<嗯嗯>的一種方法。

2、考慮安卓及ios用戶使用習慣。?比如ios的用戶除了在刪除軟件的時候長按外，基本上不會有類似的操作，但安卓平臺，長按這種手勢相當常用，這就要考慮適應不同用戶的使用習慣。?另外，大部分安卓有實體返回鍵，但ios沒有。諸如此類，很多。

3、ios對于動畫的實現相對簡單，各種炫酷效果可能不在話下，但如果一款程序要想完全移植到安卓平臺，那幾乎是不可能的。請不要為難苦逼的安卓程序員為你做各種測推啊，圖片漸隱啊，動畫這種的東西了，即使他們能做出來，最后效果估計也會卡到死了。

我們可以參考下印象筆記的界面。?相對ios版本，?安卓版本的印象筆記采用了一種更保守的交互設計。

4、請拿出多1-2倍的時間來做安卓app的適配工作。如果你想給你的程序留一個好印象的話，建議先做iphone開發，打出知名度后，再進行安卓開發。因為他們的工作量和開發困難程度天壤之別。

5、熟悉各個平臺下的默認控件。?比如多選框，開關，彈層等交互形式的異同，我還是建議各位拿同一款軟件在不同平臺上的表現形式作比較。這樣收獲更大。

五、推薦書目

1、《photoshop智能手機app界面設計》-初學者可以學到很多基礎知識。
2、《iPhone4與iPad開發基礎教程》-如果使用mac系統，可以自己搭建一個開發環境，寫一個hello world。然后裝到手機上體驗下絕無僅有的成就感。(如果遇到一個這樣的射雞師，各位程序猿就娶了吧~)
3、?實踐-最好的老師。在各種項目中鍛煉自己。多看站酷，多看優設。提高審美。?多多嘗試各種優秀的app，相信我們會在移動客戶端的設計道路上一起進步的。加油。
4、?安卓及IOS官方UI設計手冊。

六、后記

剛開始只想寫一些設計經驗，沒想到越寫越多，行文也不如第一部分那么生動有趣。?確實。設計過程中遇到的問題和訣竅，不是一篇簡單的文章可以講完的。?感謝大家能從頭到尾看完本文，經驗所限，文中的內容可能有不少錯誤和值得探討的地方，歡迎大家批評指正，讓我們一同在這個嶄新的設計領域努力吧！

最后附上Instagram概念設計

圖片分享應用Instagram由Kevin Systrom和Mike Krieger創建，2010年10月推出，截止2013年1月已擁有超過100萬注冊用戶。
2012年4月9日，社交網站巨頭facebook以10億美元的驚人價格收購。每天早八準時占位瞧最優精選，靈感不斷精彩紛呈！

原文地址：站酷
作者：我愛靜電

 
================關于優設網================
"優設網uisdc.com"是一個分享網頁設計、無線端設計以及PS教程的干貨網站。
【特色推薦】
設計講座：每月邀請國內互聯網公司設計前輩及行業總監在群內及YY語音（YY頻道：15335158）分享實戰經驗。
設計微博：擁有粉絲量43萬的人氣微博@優秀網頁設計 ，歡迎關注獲取網頁設計資源、下載頂尖設計素材。
設計導航：全球頂尖設計網站推薦，設計師必備導航：http://hao.uisdc.com
———————————————————–
想在手機上、被窩里獲取設計教程、經驗分享和各種意想不到的"福利"嗎？
添加 優秀網頁設計 微信號：【youshege】優設哥的全拼
您也可以通過掃描下方二維碼快速添加：